import { MoveText } from "@/components/MoveText";
import { unknownTrackImageUri } from "@/constants/images";
import { colors, fontSize, screenPadding } from "@/constants/tokens";
import { defaultStyles, utilsStyles } from '@/styles'
import { View, StyleSheet, Text, ActivityIndicator } from "react-native"
import FastImage from "react-native-fast-image";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useActiveTrack } from "react-native-track-player";
import { FontAwesome, MaterialCommunityIcons, Ionicons, FontAwesome6 } from '@expo/vector-icons';
import { PlayerProgressBar } from "@/components/PlayerProgressBar";
import { PlayerControls } from "@/components/PlayPauseButton";
import { PlayerVolumeBar } from "@/components/PlayerVolumeBar";
import { PlayerRepeatToggle } from "@/components/PlayerRepeatToggle";

const PlayerScreen = () => {
    const activeTrack = useActiveTrack()
    const { top, bottom } = useSafeAreaInsets()
    let isFavorite = true; //是否收藏
    const favoriteColor = '#fc3c44';
    const toggleFavorite = () => {
    }
    if (!activeTrack) {
        return <View style={[defaultStyles.container, { justifyContent: 'center' }]}>
            <ActivityIndicator color={colors.icon} />
        </View>
    }
    return <View style={style.overlayContainer}>
        <DismissPlayerSymbol />
        <View style={{
            flex: 1,
            marginTop: top + 70,
            bottom: bottom
        }}>
            <View style={style.artworkImageContainer}>
                <FastImage source={{
                    uri: activeTrack.artwork ?? unknownTrackImageUri,
                    priority: FastImage.priority.high
                }} resizeMode="cover" style={
                    style.artworkImage
                } />
            </View>
            <View style={{
                flex: 1
            }}>
                <View style={{
                    marginTop: 'auto'
                }}>

                    <View style={{
                        height: 60
                    }}>
                        <View style={{
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            alignItems: 'center'
                        }}>
                            {/* 曲目 名称 */}
                            <View style={style.trackTitleContainer} >
                                <MoveText text={`${activeTrack.title}-${activeTrack.artist}` ?? ''} animationThreshold={30} style={style.trackTitleText} />
                            </View>
                            <FontAwesome name={isFavorite ? 'heart' : 'heart-o'} size={20} color={isFavorite ? favoriteColor : colors.icon} style={{
                                marginHorizontal: 14
                            }} onPress={toggleFavorite} />

                        </View>
                        {activeTrack.artist && (
                            <Text numberOfLines={1} style={[style.trackArtistText, {
                                marginTop: 6
                            }]
                            }>{activeTrack.artist}</Text>
                        )}
                    </View>
                
                    <PlayerProgressBar style={{
                        marginTop:  32
                    }} />
                    
                    <PlayerControls style={{
                        marginTop: 40
                    }} />
                </View>
                <PlayerVolumeBar style={{
                    marginTop: 'auto',
                    marginBottom: 30
                }} />
                <View style={utilsStyles.centeredRow}>
                    <PlayerRepeatToggle size={30} style={{
                        marginBottom: 6
                    }} />
                </View>

            </View>


        </View>
    </View>
}

const DismissPlayerSymbol = () => {
    const { top, } = useSafeAreaInsets()
    return <View style={{
        position: 'absolute',
        top: top + 8,
        left: 0,
        right: 0,
        flexDirection: 'row',
        justifyContent: 'center'
    }}>
        <View accessible={false} style={{
            width: 50,
            height: 8,
            borderRadius: 8,
            backgroundColor: '#fff',
            opacity: 0.7,
        }}></View>
    </View>
}

const style = StyleSheet.create({
    overlayContainer: {
        ...defaultStyles.container,
        paddingHorizontal: screenPadding.horizontal,
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    artworkImageContainer: {
        shadowOffset: {
            width: 0,
            height: 8
        },
        shadowOpacity: 0.44,
        shadowRadius: 11.0,
        flexDirection: 'row',
        justifyContent: 'center',
        height: '45%'
    },
    artworkImage: {
        width: '100%',
        height: '100%',
        resizeMode: 'cover',
        borderRadius: 12
    },
    trackTitleContainer: {
        flex: 1,
        overflow: 'hidden'
    },
    trackTitleText: {
        ...defaultStyles.text,
        color: colors.primary,
        fontWeight: '700'
    },
    trackArtistText: {
        ...defaultStyles.text,
        fontSize: fontSize.base,
        opacity: 0.8,
        maxWidth: '90%'

    }
});

export default PlayerScreen;